<template>
	<div>
		<div v-if="flag" class="showBox showBox1">
			<img v-if="flag" class="bgimg1" :src="info[idx].ofansdetails.bgimg" alt="" />
			<img v-if="!flag" class="bgimg2" :src="info[idx].ofansdetails.bgimg" alt="" />
			<div class="container">
				<router-link :to="{path:'/circleComment'}">
					<div class="backBtn">
						<
					</div>
				</router-link>
				<div class="imgbox">
					<img src="../../../../../static/assets/images/circle/17/sx-1.png" alt="" />
				</div>
				<div class="touxiang">
					<img :src="info[idx].ofansdetails.bgimg" alt="" />
				</div>
				<div class="ofansname">{{ info[idx].ofansdetails.ofansname }}</div>
				<div class="ofansid">ID:{{ info[idx].ofansdetails.ofansid }}</div>
				<div class="qianming">个性签名:{{ info[idx].ofansdetails.qianming }}</div>
				<div class="startdetails">
					<div class="show" v-if="!flag">
						<div>
							<div class="startreply">
								<p class="p1">23</p>
								<p class="p2">个</p>
								<p class="p3">明星回复</p>
							</div>
							<div class="startimg">
								<div class="everyimg">
									<img src="../../../../../static/assets/images/circle/18/touxiang5.jpg" alt="" />
									<p>刘亦菲</p>
								</div>
								<div class="everyimg">
									<img src="../../../../../static/assets/images/circle/18/touxiang9.jpg" alt="" />
									<p>林允儿</p>
								</div>
								<div class="everyimg">
									<img src="../../../../../static/assets/images/circle/18/touxiang4.jpg" alt="" />
									<p>唐艺昕</p>
								</div>
							</div>
						</div>
						<div class="jiantous">
							<img @click="change" class="jiantouimg" src="../../../../../static/assets/images/circle/19/jts-1.png" alt="" />
						</div>
					</div>
					<div class="jiantoux" v-if="flag">
						<img @click="change" class="jiantouimg" src="../../../../../static/assets/images/circle/19/jtx-1.png" alt="" />
					</div>
				</div>
				<div>
					<div class="navbottom">
						<span class="left">
						<p class="carenum" >{{ info[idx].ofansdetails.carenum }}</p>
						<p class="second">关注</p>
					</span>
						<span class="middle">
						<p class="ofansnum">{{ info[idx].ofansdetails.ofansnumber }}</p>
						<p class="second">粉丝</p>
					</span>
						<span class="right">
						<p>已关注</p>
					</span>
					</div>
				</div>
				</div>
			</div>
			<div v-if="!flag" class="showBox showBox2">
				<img v-if="flag" class="bgimg1" :src="info[idx].ofansdetails.bgimg" alt="" />
				<img v-if="!flag" class="bgimg2" :src="info[idx].ofansdetails.bgimg" alt="" />
				<div class="container">
					<router-link :to="{path:'/circleComment'}">
						<div class="backBtn">
							<</div>
					</router-link>
					<div class="imgbox">
						<img src="../../../../../static/assets/images/circle/17/sx-1.png" alt="" />
					</div>
					<div class="touxiang">
						<img :src="info[idx].ofansdetails.bgimg" alt="" />
					</div>
					<div class="ofansname">{{ info[idx].ofansdetails.ofansname }}</div>
					<div class="ofansid">ID:{{ info[idx].ofansdetails.ofansid }}</div>
					<div class="qianming">个性签名:{{ info[idx].ofansdetails.qianming }}</div>
					<div class="startdetails">
						<div class="show" v-if="!flag">
							<div>
								<div class="startreply">
									<p class="p1">23</p>
									<p class="p2">个</p>
									<p class="p3">明星回复</p>
								</div>
								<div class="startimg">
									<div class="everyimg">
										<img src="../../../../../static/assets/images/circle/18/touxiang5.jpg" alt="" />
										<p>刘亦菲</p>
									</div>
									<div class="everyimg">
										<img src="../../../../../static/assets/images/circle/18/touxiang9.jpg" alt="" />
										<p>林允儿</p>
									</div>
									<div class="everyimg">
										<img src="../../../../../static/assets/images/circle/18/touxiang4.jpg" alt="" />
										<p>唐艺昕</p>
									</div>
								</div>
							</div>
							<div class="jiantous">
								<img @click="change" class="jiantouimg" src="../../../../../static/assets/images/circle/19/jts-1.png" alt="" />
							</div>
						</div>
						<div class="jiantoux" v-if="flag">
							<img @click="change" class="jiantouimg" src="../../../../../static/assets/images/circle/19/jtx-1.png" alt="" />
						</div>
					</div>
					<div>
						<div class="navbottom">
							<span class="left">
						<p class="carenum" >{{ info[idx].ofansdetails.carenum }}</p>
						<p class="second">关注</p>
					</span>
							<span class="middle">
						<p class="ofansnum">{{ info[idx].ofansdetails.ofansnumber }}</p>
						<p class="second">粉丝</p>
					</span>
							<span class="right">
						<p>已关注</p>
					</span>
						</div>
					</div>
					</div>
				</div>
			</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: true
			}
		},
		methods: {
			change() {
				this.flag = !this.flag
			}
		},
		props: {
			'info': {
				type: Array,
				default: {
					ofansdetails: {}
				}
			},
			'ofanstype': String,
			'idx': Number
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.showBox1 {
		height: 620/@current;
	}
	
	.showBox2 {
		height: 800/@current;
	}
	
	.showBox {
		width: 100%;
		position: relative;
		color: white;
		.bgimg1 {
			position: absolute;
			filter: blur(10px);
			width: 100%;
		}
		.bgimg2 {
			position: absolute;
			filter: blur(10px);
			width: 100%;
			height: 880/@current;
		}
		.container {
			position: absolute;
			z-index: 2;
			width: 100%;
			.backBtn {
				position: absolute;
				color: white;
				font-size: 50/@current;
				top: 68/@current;
				left: 49/@current;
			}
			.imgbox {
				width: 40/@current;
				height: 25/@current;
				position: absolute;
				right: 49/@current;
				top: 12/@current;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.touxiang {
				width: 180/@current;
				height: 180/@current;
				border: 5/@current solid white;
				border-radius: 50%;
				margin: 130/@current auto;
				margin-bottom: 16/@current;
				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.ofansname {
				font-size: 30/@current;
				text-align: center;
			}
			.ofansid {
				font-size: 24/@current;
				text-align: center;
				margin-top: 14/@current;
				color: rgba(255, 255, 255, .6);
			}
			.qianming {
				font-size: 26/@current;
				margin-top: 32/@current;
				color: rgba(255, 255, 255, .6);
				padding: 0 49/@current;
				margin-bottom: 44/@current;
			}
			.navbottom {
				margin-top: 90/@current;
				padding: 30/@current 0;
				font-size: 32/@current;
				background-color: rgba(0, 0, 0, .2);
				.left {
					display: inline-block;
					width: 33%;
					text-align: center;
					.second {
						font-size: 26/@current;
					}
				}
				.middle {
					display: inline-block;
					width: 30%;
					border-left: 4/@current solid rgba(0, 0, 0, .1);
					border-right: 4/@current solid rgba(0, 0, 0, .1);
					box-sizing: border-box;
					text-align: center;
					.second {
						font-size: 26/@current;
					}
				}
				.right {
					display: inline-block;
					width: 33%;
					text-align: center;
					color: rgba(255, 255, 255, .6);
					font-size: 30/@current;
					position: relative;
					p {
						position: absolute;
						top: -50/@current;
						left: 60/@current;
					}
				}
			}
			.startdetails {
				.show {
					text-align: center;
					.startreply {
						display: inline-block;
						font-size: 26/@current;
						.p1 {
							font-size: 48/@current;
							color: #D6D0D1;
							display: inline-block;
						}
						.p2 {
							display: inline-block;
						}
					}
					.startimg {
						display: inline-block;
						font-size: 30/@current;
						.everyimg {
							display: inline-block;
							margin: 0 40/@current ;
							img {
								width: 60/@current ;
								height: 60/@current ;
								border-radius: 50%;
							}
						}
						.everyimg:first-child {
							margin: 0;
						}
						.everyimg:last-child {
							margin: 0;
						}
					}
					.jiantous {
						position: relative;
						text-align: center;
						img {
							position: absolute;
							top: 20/@current;
							display: inline-block;
							width: 40/@current;
							height: 20/@current;
						}
					}
				}
				.jiantoux {
					position: relative;
					text-align: center;
					img {
						position: absolute;
						top: -15/@current;
						display: inline-block;
						width: 40/@current;
						height: 20/@current;
					}
				}
			}
		}
	}
</style>